<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>安全信用展示</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
 		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/login.css" media="all">
  		
  		<link rel="stylesheet" href="../../public/res/css/safecredit.css" media="all">
	</head>
	<body>
		<div class="content">
			<div class="layui-row layui-col-space1" style="height: 100%;position: relative;">
				<div class="layui-col-md2 box-l" id="move-left" style="width: 300px;">
					<div class="grid-demo grid-demo-bg1">
						<div class="layui-tab layui-tab-card">
						  <ul class="layui-tab-title">
						    <li class="layui-this">区域</li>
						    <li>企业</li>
						    <li>人</li>
						  </ul>
						  <div class="layui-tab-content">
						    <div class="layui-tab-item layui-show scroll">
						    	<fieldset class="layui-elem-field">
									<legend>管理对象</legend>
									<div class="layui-field-box">
									    <form class="layui-form" action="">
											<ul id="xtreeO"></ul>  
										</form>
									</div>
								</fieldset>
								<fieldset class="layui-elem-field">
									<legend>行政区域</legend>
									<div class="layui-field-box">
									    <form class="layui-form" action="">
											<ul id="xtreeB"></ul>  
										</form>
									</div>
								</fieldset>
								<fieldset class="layui-elem-field">
									<legend>业务网格</legend>
									<div class="layui-field-box">
									    <form class="layui-form" action="">
											<ul id="xtreeG"></ul>  
										</form>
									</div>
								</fieldset>
							</div>
						    <div class="layui-tab-item scroll">
						    	<form class="layui-form" action="">
									<ul>暂无</ul>  
								</form>
						    </div>
						    <div class="layui-tab-item scroll">
						    	<form class="layui-form" action="">
									<ul>暂无</ul>  
								</form>
						    </div>
						  </div>
						</div>
				    </div>
				</div>
				<div class="layui-col-md10 r-box" id="move-right">
					<div class="layui-row grid-demo">
						<div class="flex-icon">
					    	<span><i class="iconfont open">&#xe9be;</i></span>
					    </div>
					    <div class="layui-col-md12" id="r-title">
					        <div class="layui-row layui-col-space5 countboxs">
							  	<div>
							  		<ul>
							  			<li><span>预警提示：</span></li>
							  			<li><span><i class="square bg1"></i>A级</span></li>
							  			<li><span><i class="square bg3"></i>B级</span></li>
							  			<li><span><i class="square bg2"></i>C级</span></li>
							  			<li><span><i class="square bg5"></i>D级</span></li>
							  		</ul>
							  	</div>
							  	<div class="btn-box">
							  		<button class="layui-btn" target-name="count" name="统计图"><i class="iconfont cyan">&#xe62b;</i>统计图</button>
							  		<button class="layui-btn" target-name="warning" name="预警演示"><i class="iconfont red">&#xe67a;</i>预警演示</button>
							  		<button class="layui-btn" target-name="diagram" name="热力图"><i class="iconfont">&#xe62a;</i>热力图</button>
							  	</div>
							</div>
				        </div>
						<div class="layui-col-md12 b-map-box" id="r-map">
					        <div class="grid-demo grid-demo-bg3">
					        	<div id="allmap"></div>
					        	<div class="divWrap-r hide" id="move4" data-name="chart">
								    <h3 class="Wrap-hd">统计图<i class="iconfont Wrap-close">&#xe629;</i></h3>
								    <div id="chartcate" style="width: 100%;height: 80%;"></div>
								</div>
					        </div>
				        </div>
				    </div>
				</div>
			</div>
		</div>
		
		<div class="fullScreenBtn" id="full-screen">
			<a href="####" title="全屏"><i class="zkuasgm-icon">&#xe605;</i></a>
		</div>
		<script type="text/javascript" src="../../layuiadmin/layui/layui.js" ></script>
		<script src="http://www.youhutong.com/static/js/jquery.js"></script>
		<script type="text/javascript" src="js/layui-xtree.js" ></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=40GWXiduhOft266lK4N1dopL"></script>
		<!-- 点聚合 -->
		<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
		<!-- /点聚合 -->
		<!-- 热力图 -->
		<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
		<!-- 标注点数据 -->
		<script type="text/javascript" src="data/region.js" ></script>
		<!--统计图-->
		<script type="text/javascript" src="js/dragDiv.js" ></script>
		<script type="text/javascript" src="js/echart/echarts.js" ></script>
		
		<script>
			//xtree数据结构
			    var Ojson = [ { title: "出租屋",value: "jd1.1", data: []}
			                , { title: "楼盘小区",value: "jd1.2", data: []}
			                , { title: "横沥牛行",value: "jd1.3", data: []}
			                , { title: "模具行业",value: "jd1.4", data: []}
			    ];
			    var Bjson = [ {
			                title: "行政区域一", value: "jd2", data: [
			                { title: "盐步社区",value: "jd2.1", data: []}
			                , { title: "岐丰社区",value: "jd2.2", data: []}
			                , { title: "岐阳社区",value: "jd2.3", data: []}
			                , { title: "沙溪社区",value: "jd2.4", data: []}
			                , { title: "平地社区",value: "jd2.5", data: []}
			                , { title: "泌冲社区",value: "jd2.6", data: []}
			                ]
			            }
			    ];
			    var Gjson = [ {
			                title: "消防安全", value: "jd3", data: [
			                { title: "消防安全网格1",value: "jd3.1", data: []}
			                , { title: "消防安全网格2",value: "jd3.2", data: []}
			                , { title: "消防安全网格3",value: "jd3.3", data: []}
			                , { title: "消防安全网格4",value: "jd3.4", data: []}
			                , { title: "消防安全网格5",value: "jd3.5", data: []}
			                , { title: "消防安全网格6",value: "jd3.6", data: []}
			                ]
			            }
			    ];
			layui.use(['form','element','tree', 'layer'], function(){
				var $ = layui.jquery
				,element = layui.element;
				var form = layui.form;
				var layer = layui.layer;   
				  
				  //最完整的参数用法
			       var xtreeO = new layuiXtree({
			            elem: 'xtreeO'                  //必填三兄弟之老大
			            , form: form                    //必填三兄弟之这才是真老大
			            , data: Ojson //必填三兄弟之这也算是老大
			            , isopen: true  //加载完毕后的展开状态，默认值：true
			            , ckall: false    //启用全选功能，默认值：false
			            , ckallback: function () { } //全选框状态改变后执行的回调函数
			            , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
			                open: "&#xe7a0;"       //节点打开的图标
			                , close: "&#xe622;"    //节点关闭的图标
			                , end: "&#xe621;"      //末尾节点的图标
			            }
			            , color: {       //三种图标颜色，独立配色，更改几个都可以
			                open: "#EE9A00"        //节点图标打开的颜色
			                , close: "#EEC591"     //节点图标关闭的颜色
			                , end: "#828282"       //末级节点图标的颜色
			            }
			            , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
			                console.log(data.elem); //得到checkbox原始DOM对象
			                console.log(data.elem.checked); //开关是否开启，true或者false
			                console.log(data.value); //开关value值，也可以通过data.elem.value得到
			                console.log(data.othis); //得到美化后的DOM对象
			            }
			        });
				  
				  //最完整的参数用法
			       var xtreeB = new layuiXtree({
			            elem: 'xtreeB'                  //必填三兄弟之老大
			            , form: form                    //必填三兄弟之这才是真老大
			            , data: Bjson //必填三兄弟之这也算是老大
			            , isopen: false  //加载完毕后的展开状态，默认值：true
			            , ckall: false    //启用全选功能，默认值：false
			            , ckallback: function () { } //全选框状态改变后执行的回调函数
			            , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
			                open: "&#xe7a0;"       //节点打开的图标
			                , close: "&#xe622;"    //节点关闭的图标
			                , end: "&#xe621;"      //末尾节点的图标
			            }
			            , color: {       //三种图标颜色，独立配色，更改几个都可以
			                open: "#EE9A00"        //节点图标打开的颜色
			                , close: "#EEC591"     //节点图标关闭的颜色
			                , end: "#828282"       //末级节点图标的颜色
			            }
			            , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
			                console.log(data.elem); //得到checkbox原始DOM对象
			                console.log(data.elem.checked); //开关是否开启，true或者false
			                console.log(data.value); //开关value值，也可以通过data.elem.value得到
			                console.log(data.othis); //得到美化后的DOM对象
			            }
			        });
			        //最完整的参数用法
			       var xtreeG = new layuiXtree({
			            elem: 'xtreeG'                  //必填三兄弟之老大
			            , form: form                    //必填三兄弟之这才是真老大
			            , data: Gjson //必填三兄弟之这也算是老大
			            , isopen: false  //加载完毕后的展开状态，默认值：true
			            , ckall: false    //启用全选功能，默认值：false
			            , ckallback: function () { } //全选框状态改变后执行的回调函数
			            , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
			                open: "&#xe7a0;"       //节点打开的图标
			                , close: "&#xe622;"    //节点关闭的图标
			                , end: "&#xe621;"      //末尾节点的图标
			            }
			            , color: {       //三种图标颜色，独立配色，更改几个都可以
			                open: "#EE9A00"        //节点图标打开的颜色
			                , close: "#EEC591"     //节点图标关闭的颜色
			                , end: "#828282"       //末级节点图标的颜色
			            }
			            , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
			                console.log(data.elem); //得到checkbox原始DOM对象
			                console.log(data.elem.checked); //开关是否开启，true或者false
			                console.log(data.value); //开关value值，也可以通过data.elem.value得到
			                console.log(data.othis); //得到美化后的DOM对象
			            }
			        });
				 //左侧面板伸缩事件
				$('.flex-icon').click(function() {
					$(this).find('.zkuasgm-icon').toggleClass('close');		
					$(this).find('.zkuasgm-icon').toggleClass('open');		//点击位置的icon的切换
					$('#move-left').stop().animate({				//左侧面板伸缩动画
						width: 'toggle',
						opacity: 'toggle'
					}, {
						queue: false,
						duration: 100
					});
					var para = $('#move-left').css("opacity");		//判断左侧是否伸缩
					if(para == '1') {							//缩进，右侧面板伸展
						$("#move-right").animate({
							width: "auto",
							left:"0px"
						}, {
							queue: false,
							duration: 100
						});
					} else {								//伸展，右侧面板缩进
						$("#move-right").animate({
							width: "auto",
							left:"300px"
						}, {
							queue: false,
							duration: 100
						});
					}
				}); 
			});
		</script>
		<script>
			// 百度地图API功能
			var map = new BMap.Map("allmap"); //创建百度地图实例，这里的allmap是地图容器的id
			var point = new BMap.Point(113.116798,23.115485);
			map.centerAndZoom(point, 15); //这里是将地图的中心移动到我们刚才创建的点；这里的12是地图的缩放界别；数值越大，地图看的越细
	//		var opts2={mapTypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_HYBRID_MAP,BMAP_SATELLITE_MAP]};
	//		map.addControl(new BMap.MapTypeControl(opts2));   //添加地图类型控件
			
			// 添加带有定位的导航控件
			  var navigationControl = new BMap.NavigationControl({
			    // 靠右上角位置
			    anchor: BMAP_ANCHOR_TOP_RIGHT ,
			    // LARGE类型
			    type: BMAP_NAVIGATION_CONTROL_SMALL ,
			    // 启用显示定位
			    enableGeolocation: true
			  });
			  map.addControl(navigationControl);
			  // 添加定位控件
			  var geolocationControl = new BMap.GeolocationControl({
			  	anchor: BMAP_ANCHOR_TOP_RIGHT,
			  	offset: new BMap.Size(8, 130)
			  });
			  geolocationControl.addEventListener("locationSuccess", function(e){
			    // 定位成功事件
			    var address = '';
			    address += e.addressComponent.province;
			    address += e.addressComponent.city;
			    address += e.addressComponent.district;
			    address += e.addressComponent.street;
			    address += e.addressComponent.streetNumber;
			    alert("当前定位地址为：" + address);
			  });
			  geolocationControl.addEventListener("locationError",function(e){
			    // 定位失败事件
			    alert(e.message);
			  });
			  map.addControl(geolocationControl);
			  map.enableScrollWheelZoom(true);
			  
			  
//			// 编写自定义函数,创建标注
//			function addMarker(point){
//			  var marker = new BMap.Marker(point);
//			  map.addOverlay(marker);
//			}
			// 随机向地图添加25个标注
//			var bounds = map.getBounds();
//			var sw = bounds.getSouthWest();
//			var ne = bounds.getNorthEast();
//			var lngSpan = Math.abs(sw.lng - ne.lng);
//			var latSpan = Math.abs(ne.lat - sw.lat);
//			var markers = [];
//			for (var i = 0; i < 30; i ++) {
//				var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.009), ne.lat - latSpan * (Math.random() * 0.009));
//				markers.push(new BMap.Marker(point));
//			}
//			console.log(markers)
//			var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
//			
			//单击获取点击的经纬度
//			map.addEventListener("click",function(e){
//				alert(e.point.lng + "," + e.point.lat);
//			});
		</script>
		<script>
			var region_arr=region;
			var JH_marker=[],RL_arr=[]; 
			getResult(region_arr);
			//信息窗口设置
			var optS = {
				width: 240, //信息窗口宽度
				height: 0, //信息窗口高度
				enableMessage: true //设置允许信息窗口发送信息
			};
			//打开信息弹窗
			function OpenInfo(point,content,opt){
				var infoWindow = new BMap.InfoWindow(content, opt); //创建信息窗口对象
				map.openInfoWindow(infoWindow, point); //开启信息窗口
			};
			//关闭信息弹窗
			function CloseInfo(point,content,opt){
				var infoWindow = new BMap.InfoWindow(content, opt); //创建信息窗口对象
				map.closeInfoWindow(infoWindow, point); //开启信息窗口
			};
			//数据渲染
			function getResult(data){
				var 	RL_obj={};RL_arr=[];
				if(data.length){
					$.each(data, function(k,t) {
						//信息弹窗内容显示
						var content="<div class='layui-anim layui-anim-scaleSpring'>"
								+"<fieldset class='layui-elem-field layui-field-title'>"
								+"<legend>"+t.object+"</legend>"
								+"<div class='layui-field-box uinfo'>"
								+"<ul>"
								+"<li><i class='cyan'>负责人：</i><span>"+t.leader+"</span></li>"
								+"<li><i class='cyan'>安全等级：</i><span>"+t.grade+"</span></li>"
								+"<li><i class='cyan'>消防设施：</i><span>"+t.facilities+"</span></li>"
								+"<li><i class='cyan'>地址：</i><span>"+t.deptName+"</span></li>"
								+"<li style='text-align:center;'><button class='layui-btn'>惩戒</button></li>"
								+"  </ul>"
								+"  </div>"
								+"</fieldset>"
								+"</div>";
						RL_obj= {"lng":t.x,"lat":t.y,"count":t.fraction};
						RL_arr.push(RL_obj);
						var pt=new BMap.Point(t.x, t.y);
						addMakers(pt,content,t.img);
					});
				}
				
			}
			//标注点
			function addMakers(point,content,img){
				var Icon = new BMap.Icon(img, new BMap.Size(26, 26));
				var marker = new BMap.Marker(point, {
					icon: Icon
				});
				map.addOverlay(marker);
				marker.addEventListener("click",function(){
					OpenInfo(point,content,optS);
				});
				JH_marker.push(marker);
				//添加聚合效果。
				//var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:JH_marker});
			}
			
			//切换热力图
			$('[target-name="diagram"]').toggle(
			  function(){
			  	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
				map.addOverlay(heatmapOverlay);
				heatmapOverlay.setDataSet({data:RL_arr,max:100});
				heatmapOverlay.show();
			  },
			  function(){
			  	heatmapOverlay.hide();}
			);
			
			

			
			$('[target-name="warning"]').click(function(){
				var mk=new BMap.Point(113.09893661146748,23.117230923195383);
				var marker = new BMap.Marker(mk);  // 创建标注
				map.removeOverlay(marker);
				map.addOverlay(marker);               // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				map.centerAndZoom(mk, 15);
				
				var content="<div class='layui-anim layui-anim-scaleSpring'>"
								+"<fieldset class='layui-elem-field layui-field-title'>"
								+"<legend>出租屋</legend>"
								+"<div class='layui-field-box uinfo'>"
								+"<ul>"
								+"<li><i class='cyan'>负责人：</i><span>邢雨歆</span></li>"
								+"<li><i class='cyan'>地址：</i><span>大沥镇xx区xx街xx号</span></li>"
								+"<li><i class='cyan'>事由：</i><span>发生火灾</span></li>"
								+"<li><i class='cyan'>现住人口：</i><span>10人</span></li>"
								+"<li style='text-align:center;'><button class='layui-btn'>查看视频</button><button class='layui-btn'>处理</button></li>"
								+"  </ul>"
								+"  </div>"
								+"</fieldset>"
								+"</div>";
				OpenInfo(mk,content,optS);
				
			});
			$('[target-name="count"]').click(function(){
				$('#move4').toggleClass('hide');
				var optioncategory = {
				    title: {
				        text: '消防安全统计',
				        subtext: '数据来自来源'
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['总计','出租屋','楼盘小区','横沥牛行','模具行业']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				    	position:'right',
				        type: 'category',
				        data: ['总计','出租屋','楼盘小区','横沥牛行','模具行业']
				    },
				    series: [
				        {
				            name: 'A级',
				            type: 'bar',
				            data: [93,30, 20, 11, 32]
				        },
				        {
				            name: 'B级',
				            type: 'bar',
				            data: [59,22, 11, 20, 6]
				        }
				        ,
				        {
				            name: 'C级',
				            type: 'bar',
				            data: [16,8, 1, 2, 5]
				        }
				        ,
				        {
				            name: 'D级',
				            type: 'bar',
				            data: [14,5, 2, 1, 6]
				        }
				    ]
				};
				var myChart5 = echarts.init(document.getElementById('chartcate'));
				myChart5.setOption(optioncategory);
			})
			
			
			
			
//			$(document).ready(function() {
//				$("#move4").dragDiv(); //拖拽
//			});
			//拖拽框关闭
			$('.Wrap-close').click(function(){
				$(this).parent().parent().hide();
			});
		</script>
		
	</body>
</html>
